<template>
  <div class="container">
    <el-card class="newCard">
      <div class="newHead">试题修改</div>
      <div class="newBody">
        <el-form
          ref="formRef"
          :model="newForm"
          :rules="formRules"
          label-width="120px"
        >
          <el-form-item label="学科:" prop="subjectID">
            <el-select
              placeholder="请选择"
              v-model="newForm.subjectID"
              @focus="getSub"
            >
              <el-option
                v-for="item in subjectList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录:" prop="catalogID">
            <el-select
              placeholder="请选择"
              v-model="newForm.catalogID"
              @focus="getDiff"
            >
              <el-option
                v-for="item in catalogList"
                :key="item.id"
                :label="item.directoryName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="企业:" prop="enterpriseID">
            <el-select
              placeholder="请选择"
              v-model="newForm.enterpriseID"
              @focus="getEnter"
            >
              <el-option
                v-for="item in enterList"
                :key="item.id"
                :label="item.remarks"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="城市：" prop="city">
            <el-select
              placeholder="请选择"
              v-model="newForm.province"
              @focus="getProv"
              style="width: 200px; margin-right: 5px"
            >
              <el-option
                v-for="item in provList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-select
              placeholder="请选择"
              v-model="newForm.city"
              @focus="getCity"
              style="width: 200px"
            >
              <el-option
                v-for="item in cityList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向：" prop="direction">
            <el-select placeholder="请选择" v-model="newForm.direction">
              <el-option
                v-for="item in direction"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="题型：" prop="questionType">
            <el-radio-group v-model="newForm.questionType">
              <el-radio
                v-for="item in questionType"
                :key="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="难度：" prop="difficulty">
            <el-radio-group v-model="newForm.difficulty">
              <el-radio
                v-for="item in difficulty"
                :key="item.value"
                :label="item.value"
                >{{ item.label }}</el-radio
              >
            </el-radio-group>
          </el-form-item>
          <el-form-item label="题干：" class="quillEditor" prop="question">
            <quillEditor v-model="newForm.question" :options="editorOption" />
          </el-form-item>
          <!-- 单选、多选 -->
          <el-form-item label="选项：" v-if="newForm.questionType !== 3">
            <!-- 单选选项 -->
            <el-radio-group
              v-if="newForm.questionType === 1"
              v-model="radio"
              @change="changeRadio"
            >
              <div
                class="radio"
                v-for="(item, index) in newForm.options"
                :key="index"
              >
                <el-radio :label="item.code">
                  {{ item.code }}：<el-input
                    v-model="item.title"
                    placeholder="请输入内容"
                  />
                  <UploadImg :dialogImageUrl="item.img" />
                </el-radio>
              </div>
            </el-radio-group>

            <!-- 多选 -->
            <el-checkbox-group
              v-if="newForm.questionType === 2"
              v-model="checkList"
              @change="checkChange"
            >
              <div
                class="radio"
                v-for="(item, index) in newForm.options"
                :key="index"
              >
                <el-checkbox :label="item.code">
                  {{ item.code }}：<el-input
                    v-model="item.title"
                    placeholder="请输入内容"
                  />
                  <UploadImg :dialogImageUrl="item.img" />
                </el-checkbox>
              </div>
            </el-checkbox-group>
            <el-button
              type="danger"
              size="medium"
              icon="el-icon-plus"
              :disabled="isDisable"
              @click="addCheck"
              >增加选项与答案</el-button
            >
          </el-form-item>
          <el-form-item label="解析视频：">
            <el-input v-model="newForm.videoURL"></el-input>
          </el-form-item>
          <el-form-item label="答案解析：" class="quillEditor" prop="answer">
            <quillEditor v-model="newForm.answer" :options="editorOption" />
          </el-form-item>
          <el-form-item label="题目备注">
            <el-input
              type="textarea"
              rows="3"
              placeholder="请输入内容"
              v-model="newForm.remarks"
            >
            </el-input>
          </el-form-item>
          <el-form-item label="试题标签：" prop="tags">
            <el-select
              v-model="newForm.tags"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="请选择"
              @focus="getTag"
            >
              <el-option
                v-for="item in tagsList"
                :key="item.id"
                :label="item.tagName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="btnOk">确认提交</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { simple } from '../../api/hmmm/subjects'
import { list as disList } from '../../api/hmmm/directorys'
import { list as tagList } from '../../api/hmmm/tags'
import { questionType, difficulty, direction } from '../../api/hmmm/constants'
import UploadImg from '../../components/UploadImg/index.vue'
import {
  add,
  detail as detailList,
  update as updateList
} from '../../api/hmmm/questions'
import { provinces, citys } from '../../api/hmmm/citys'
import { list as companyList } from '../../api/hmmm/companys'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'
export default {
  watch: {
    $route () {
      console.log(this.$route.query.id)
      this.getQuestionID = this.$route.query.id
      this.newForm = {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        tags: '',
        questionType: 1, // 题型
        difficulty: 1, // 难度
        question: '',
        options: [
          {
            code: 'A', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确选项
          },
          {
            code: 'B', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确选项
          },
          {
            code: 'C', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确选项
          },
          {
            code: 'D', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确选项
          }
        ],
        answer: '',
        remarks: '', // 题目备注
        videoURL: '' // 视频路径
      }
      this.$refs.formRef.resetFields()
    }
  },
  data () {
    return {
      newForm: {
        subjectID: '',
        catalogID: '',
        enterpriseID: '',
        province: '',
        city: '',
        direction: '',
        tags: [],
        questionType: 1, // 题型
        difficulty: 1, // 难度
        question: '',
        options: [
          {
            code: 'A', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确选项
          },
          {
            code: 'B', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确选项
          },
          {
            code: 'C', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确选项
          },
          {
            code: 'D', // 代码
            title: '', // 标题
            img: '', // 图片URL
            isRight: false // 是否正确选项
          }
        ],
        answer: '',
        remarks: '', // 题目备注
        videoURL: '' // 视频路径
      },
      formRules: {
        subjectID: [{ required: true, message: '请输入学科', trigger: 'blur' }],
        catalogID: [{ required: true, message: '请输入目录', trigger: 'blur' }],
        enterpriseID: [
          { required: true, message: '请输入企业', trigger: 'blur' }
        ],
        city: [{ required: true, message: '请输入地区', trigger: 'blur' }],
        direction: [{ required: true, message: '请输入方向', trigger: 'blur' }],
        questionType: [
          { required: true, message: '请输入题型', trigger: 'blur' }
        ],
        difficulty: [
          { required: true, message: '请输入难度', trigger: 'blur' }
        ],
        question: [{ required: true, message: '请输入题干', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入解析', trigger: 'blur' }],
        tags: [{ required: true, message: '请输入解析', trigger: 'blur' }]
      },
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // toggled buttons
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block', 'image', 'link']
          ]
        }
      },
      subjectList: [],
      catalogList: [],
      provList: [],
      cityList: [],
      tagsList: [],
      enterList: [],
      difficulty,
      direction,
      questionType,
      radio: '', // 单选
      checkList: [], // 多选题
      code: '68',
      getQuestionID: this.$route.query.id
    }
  },
  components: {
    UploadImg,
    quillEditor
  },
  computed: {
    isDisable () {
      return this.newForm.questionType === 1
    }
  },
  created () {
    this.getTag()
    if (this.getQuestionID) {
      this.eidtList({ id: this.getQuestionID })
    }
  },
  methods: {
    // 回显题目
    async eidtList (row) {
      console.log(this.getQuestionID)
      const { data } = await detailList(row)
      data.questionType = Number(data.questionType)
      data.difficulty = Number(data.difficulty)
      data.tags = data.tags.split(',')
      this.tagsList = data.tags.map((item) => item * 1)
      this.newForm = data
      console.log(data)
    },
    // 添加题目
    async btnOk () {
      try {
        await this.$refs.formRef.validate()
        this.newForm.questionType = this.newForm.questionType.toString()
        this.newForm.difficulty = this.newForm.difficulty.toString()
        this.newForm.tags.forEach((item) => item.toString())
        this.newForm.tags = this.newForm.tags.join(',')
        if (this.getQuestionID) {
          await updateList(this.newForm)
        } else {
          await add(this.newForm)
        }
        this.$message.success(this.getQuestionID ? '修改成功' : '添加成功')
        this.$refs.formRef.resetFields()
        await this.$router.push('/questions/list')
      } catch (e) {
        this.$message.error(this.getQuestionID ? '修改失败' : '添加失败')
      }
    },
    // 增加选项
    addCheck () {
      this.code++
      const char = String.fromCharCode(this.code)
      this.newForm.options = [
        ...this.newForm.options,
        {
          code: char,
          title: '',
          img: '',
          isRight: false
        }
      ]
    },
    // 复选框变化
    checkChange () {
      console.log(this.newForm.options)
      this.newForm.options.forEach((item) => {
        this.checkList.includes(item.code)
          ? (item.isRight = true)
          : (item.isRight = false)
      })
    },
    // 单选框变化
    changeRadio () {
      console.log(this.newForm.options)
      this.newForm.options.forEach((item) => {
        item.code === this.radio
          ? (item.isRight = true)
          : (item.isRight = false)
      })
    },
    // 学科
    async getSub () {
      const { data } = await simple()
      this.subjectList = data
    },
    // 难度
    async getDiff () {
      if (this.newForm.subjectID.length !== 0) {
        const { data } = await disList(this.newForm)
        this.catalogList = data.items
      } else {
        this.catalogList = []
      }
    },
    // 标签
    async getTag () {
      if (this.newForm.subjectID.length !== 0) {
        const { data } = await tagList({})
        this.tagsList = data.items
        console.log(this.newForm.tags)
      } else {
        this.tagsList = []
      }
    },
    // 企业
    async getEnter () {
      const { data } = await companyList(this.newForm)
      this.enterList = data.items
    },
    // 城市
    getProv () {
      this.provList = provinces()
    },
    // 省份
    getCity () {
      if (this.newForm.province !== 0) {
        this.cityList = citys(this.newForm.province)
      } else {
        this.cityList = []
      }
    }
  }
}
</script>

<style scoped lang="less">
.container {
  .newCard {
    margin: 20px;
    .newHead {
      padding: 18px 20px;
      font-size: 19px;
      border-bottom: 1px solid #ebeef5;
    }
    .newBody {
      padding: 20px;
      font-weight: 700;
      font-size: 14px;
      .el-form-item {
        height: 100%;
        margin-bottom: 22px;
        .el-select {
          width: 400px;
        }
      }
      .quillEditor {
        height: 230px;
        margin-bottom: 22px;
        .quill-editor {
          height: 170px;
        }
      }
      .radio {
        width: 976px;
        padding-bottom: 20px;
      }
    }
  }
}
</style>
